<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>节点操作</title>
  <style>
  </style>
</head>

<body>
  <div id="root">
    <div class="s2"><span class="er">x</span></div>
    <span class="er">x</span>

    <ul>
      <li index="1"><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">6</a></li>
      <li><a href="#">7</a></li>
      <li><a href="#">8</a></li>
    </ul>
    <ol>
      <li><span>1 </span></li>
      <li><span>2</span></li>
      <li><span>3</span></li>
      <li><span>4</span></li>
      <li><span>5</span></li>
      <li><span>6</span></li>
      <li><span>7</span></li>
      <li><span>8</span></li>
      <li><span>9</span></li>
      <li><span>10</span></li>
    </ol>
  </div>
</body>
<script>
  /* 
      获取元素的两种方法
          利用dom
          利用节点层次关系获取元素(父子兄弟)
            nodeType nodeName nodeValue三个基本属性
              元素节点的nodeType为1
              属性节点的nodeType为2
              文本节点的nodeType为3
            开发中节点操作主要是操作元素节点
              
  */
  let root = document.querySelector('#root')
  console.dir(root)
  /* 
    父节点parentNode   
      得到的是最近一层父节点 不是祖节点  如果找不到父节点就返回null
  */
  let parent = document.querySelector('.er').parentNode
  console.log(parent)
  console.log('********************************')
  /* 
    子节点childNodes
      到的是子节点集合 包含元素节点 文本节点
      childNodes一般需要专门处理 筛选出元素节点
      一般不使用childNodes
        一般用children 返回子元素集合 
  */
  let childs = document.querySelector('ul').childNodes
  //  console.dir(childs[1].innerHTML)
  for (let c of childs) {
    if (c.nodeType === 1) {
      // console.dir(c)
    }
  }
  let cc = document.querySelector('ul').children
  console.dir(cc)
  /* 
    子节点操作
      获取第一个子
        firstElementChild
      获取最后一个子
        lastElementChild
      实际开发
        children[0]
        children[last]
  */
  let ol = document.querySelector('ol')
  let fr = ol.firstElementChild
  console.dir(fr)
  let la = ol.lastElementChild
  console.dir(la)
  /* 
   兄弟节点
    nextSibling
      返回当前元素的下一个兄弟节点 包含文本元素
    previousSibling
      当前节点的上一个节点
  */
  let ul = document.querySelector('ul')
  console.dir(ul.nextSibling)
 console.dir( ul.previousElementSibling)
</script>

</html>